search: Replace IconGrid from grid search results

Replace the usage of IconGrid in the grid search results by
a custom layout manager that only allocates as many children
as the actor can fit.

This new layout manager does not implement changing the icon
size depending on the screen size.

https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1265

diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index 9836724bb39b111a26fb6fc3004d1f6ab63d3466..0d81c974dd3aeec65a0668110e54eac718208aa3 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -54,6 +54,10 @@
   @extend %status_text;
 }
 
+.grid-search-results {
+  spacing: $base_spacing * 6;
+}
+
 // Search results with icons
 .grid-search-result {
   @extend %app-well-app;

diff --git a/js/ui/search.js b/js/ui/search.js
index 1c91995380c1ea64dd1f4cdb1dca6e72eb29668c..513f0a1ed275126aff8a4616594f49c2253cb6a0 100644 (file)
--- a/js/ui/search.js
+++ b/js/ui/search.js
@@ -13,7 +13,6 @@ const Util = imports.misc.util;
 const SEARCH_PROVIDERS_SCHEMA = 'org.gnome.desktop.search-providers';
 
 var MAX_LIST_SEARCH_RESULTS_ROWS = 5;
-var MAX_GRID_SEARCH_RESULTS_ROWS = 1;
 
 var MaxWidthBox = GObject.registerClass(
 class MaxWidthBox extends St.BoxLayout {
@@ -349,18 +348,140 @@ class ListSearchResults extends SearchResultsBase {
     }
 });
 
+var GridSearchResultsLayout = GObject.registerClass({
+    Properties: {
+        'spacing': GObject.ParamSpec.int('spacing', 'Spacing', 'Spacing',
+            GObject.ParamFlags.READWRITE, 0, GLib.MAXINT32, 0),
+    },
+}, class GridSearchResultsLayout extends Clutter.LayoutManager {
+    _init() {
+        super._init();
+        this._spacing = 0;
+    }
+
+    vfunc_set_container(container) {
+        this._container = container;
+    }
+
+    vfunc_get_preferred_width(container, forHeight) {
+        let minWidth = 0;
+        let natWidth = 0;
+        let first = true;
+
+        for (let child of container) {
+            if (!child.visible)
+                continue;
+
+            const [childMinWidth, childNatWidth] = child.get_preferred_width(forHeight);
+
+            minWidth = Math.max(minWidth, childMinWidth);
+            natWidth += childNatWidth;
+
+            if (first)
+                first = false;
+            else
+                natWidth += this._spacing;
+        }
+
+        return [minWidth, natWidth];
+    }
+
+    vfunc_get_preferred_height(container, forWidth) {
+        let minHeight = 0;
+        let natHeight = 0;
+
+        for (let child of container) {
+            if (!child.visible)
+                continue;
+
+            const [childMinHeight, childNatHeight] = child.get_preferred_height(forWidth);
+
+            minHeight = Math.max(minHeight, childMinHeight);
+            natHeight = Math.max(natHeight, childNatHeight);
+        }
+
+        return [minHeight, natHeight];
+    }
+
+    vfunc_allocate(container, box, flags) {
+        const width = box.get_width();
+
+        const childBox = new Clutter.ActorBox();
+        childBox.x1 = 0;
+        childBox.y1 = 0;
+
+        let first = true;
+        for (let child of container) {
+            if (!child.visible)
+                continue;
+
+            if (first)
+                first = false;
+            else
+                childBox.x1 += this._spacing;
+
+            const [childWidth] = child.get_preferred_width(-1);
+            const [childHeight] = child.get_preferred_height(-1);
+            childBox.set_size(childWidth, childHeight);
+
+            if (childBox.x1 + childWidth > width)
+                return;
+
+            child.allocate(childBox, flags);
+
+            childBox.x1 += childWidth;
+        }
+    }
+
+    columnsForWidth(width) {
+        if (!this._container)
+            return -1;
+
+        const [minWidth] = this.get_preferred_width(this._container, -1);
+
+        if (minWidth === 0)
+            return -1;
+
+        let nCols = 0;
+        while (width > minWidth) {
+            width -= minWidth;
+            if (nCols > 0)
+                width -= this._spacing;
+            nCols++;
+        }
+
+        return nCols;
+    }
+
+    get spacing() {
+        return this._spacing;
+    }
+
+    set spacing(v) {
+        if (this._spacing === v)
+            return;
+        this._spacing = v;
+        this.layout_changed();
+    }
+});
+
 var GridSearchResults = GObject.registerClass(
 class GridSearchResults extends SearchResultsBase {
     _init(provider, resultsView) {
         super._init(provider, resultsView);
 
-        this._grid = new IconGrid.IconGrid({ rowLimit: MAX_GRID_SEARCH_RESULTS_ROWS,
-                                             xAlign: St.Align.START });
+        this._grid = new St.Widget({ style_class: 'grid-search-results' });
+        this._grid.layout_manager = new GridSearchResultsLayout();
 
-        this._bin = new St.Bin({ x_align: Clutter.ActorAlign.CENTER });
-        this._bin.set_child(this._grid);
+        this._grid.connect('style-changed', () => {
+            const node = this._grid.get_theme_node();
+            this._grid.layout_manager.spacing = node.get_length('spacing');
+        });
 
-        this._resultDisplayBin.set_child(this._bin);
+        this._resultDisplayBin.set_child(new St.Bin({
+            child: this._grid,
+            x_align: Clutter.ActorAlign.CENTER,
+        }));
     }
 
     _onDestroy() {
@@ -400,12 +521,11 @@ class GridSearchResults extends SearchResultsBase {
         if (width == 0)
             return -1;
 
-        let nCols = this._grid.columnsForWidth(width);
-        return nCols * this._grid.getRowLimit();
+        return this._grid.layout_manager.columnsForWidth(width);
     }
 
     _clearResultDisplay() {
-        this._grid.removeAll();
+        this._grid.remove_all_children();
     }
 
     _createResultDisplay(meta) {
@@ -414,14 +534,15 @@ class GridSearchResults extends SearchResultsBase {
     }
 
     _addItem(display) {
-        this._grid.addItem(display);
+        this._grid.add_child(display);
     }
 
     getFirstResult() {
-        if (this._grid.visibleItemsCount() > 0)
-            return this._grid.getItemAtIndex(0);
-        else
-            return null;
+        for (let child of this._grid) {
+            if (child.visible)
+                return child;
+        }
+        return null;
     }
 });